import 'package:flutter/material.dart';

import 'package:sharing/ui/home/home.dart';
import 'package:sharing/ui/my/my.dart';
import 'package:sharing/ui/experience/experience.dart';
import 'package:sharing/ui/bookshelf/bookshelf.dart';
import 'package:sharing/resources/strings.dart';
import 'package:sharing/resources/code_point.dart';
import 'package:sharing/resources/font_families.dart';
import 'package:sharing/resources/colors.dart';
import 'package:sharing/resources/dimens.dart';
import 'package:sharing/resources/styles.dart';
import 'dart:async'; // 延迟调用

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  static const int _homeIndex = 0;
  static const int _shelfIndex = 1;
  static const int _experienceIndex = 2;
  static const int _myIndex = 3;
  int _currentIndex = 0;

  TabController _tabController;
  // pageViewController 控制pageView
  PageController _pageController;
  VoidCallback _onChange;
  List<Widget> _pages = [];

  @override
  void initState() {
    super.initState();
    //  初始化pageview
    _pages
      ..add(HomePage())
      ..add(BookshelfPage())
      ..add(ExperiencePage())
      ..add(MyPage());

    _tabController = TabController(
        initialIndex: _currentIndex, length: _pages.length, vsync: this);

    _pageController = PageController(initialPage: 0);

// 页面翻生变化的回回调函数
    _onChange = () {
      setState(() {
        _currentIndex = this._tabController.index;
        // pageView 的控制器控制页面发生跳转...
        _pageController.animateToPage(_currentIndex,
            duration: Duration(microseconds: 200), curve: Curves.ease);
      });
    };

// 加入监听事件的回调函数
    _tabController.addListener(_onChange);
  }

  @override
  void dispose() {
    _tabController.removeListener(_onChange); // 移除监听
    _tabController.dispose(); // 销毁 控制器
    _pageController.dispose(); // 销毁 控制器 pageView
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(

      // 构建显示主要的内容
      child: Scaffold(
        // 构造 pageView
        body: _buildBody(),
        // 构造底部可以按压的按钮切换选项卡
        bottomNavigationBar: _buildBottomNavigationBar(),
      ),
    );
  }

// 构建pageView
  Widget _buildBody() {
    return PageView.builder(
      itemBuilder: _pageViewBuilder,
      // 构造子项的长度为 显示页面你的长度
      itemCount: _pages.length,
      controller: _pageController, // 页面的控制器
      onPageChanged: _onPageChange, // 设置页面发生切换的回调函数
      scrollDirection: Axis.horizontal, // 水平方向的切换, 还有一个是垂直方向的可切换的可以选择
    );
  }

// pageView 页面发生变化,,,
  _onPageChange(int index) {
    // 设置和底部的tab栏发生联动
    setState(() {
      _tabController.index = index;
      // 设置当前页面的下标发生联动
      _currentIndex = _tabController.index;
    });
  }

  Widget _pageViewBuilder(BuildContext context, int index) {
    return _pages[index];
  }

// 构建 底部的导航栏..
  Widget _buildBottomNavigationBar() {
    return Container(
      padding: EdgeInsets.only(bottom: 0.0),
      decoration: BoxDecoration(
        border: Border(
          // 设置一个上划线 .
          top: BorderSide(
              color: AppColor.divider, width: Dimensions.dividerWidth),
        ),
      ),
      height: Dimensions.tabBarHeight, // 底部导航栏的高度设置
      child: TabBar(
        indicatorSize: TabBarIndicatorSize.tab,
        indicatorWeight: 0.00001,
        indicatorPadding: EdgeInsets.only(bottom: -10.0),
        indicatorColor: Colors.orange,
        indicator: UnderlineTabIndicator(
          borderSide: const BorderSide(width: 0.0, color: Colors.black),
          insets: EdgeInsets.zero,
        ),

        labelStyle: AppStyles.tabBarTextStyle, //  文本不占用高度..
        controller: _tabController,

        tabs: _buildTab(),
      ),
    );
  }

  // 构建tabbar 选项
  // 如果发生选项卡的切换, 则图标和文字的颜色根据当前的下标和 当前选项卡的下标来进行
  // 图标和文字的渲染,
  // 如果当前的下标和当前选项卡的下标相同, 进行深色 染色
  // 如果当前的下标和当前选项卡的下标不相同, 进行浅色前景处理
  List<Widget> _buildTab() {
    return <Widget>[
      Tab(
        child: _MyBottomTab(
          icon: Icon(
            IconData(IconCode.home, fontFamily: FontFamiles.iconFontFamily),
            color: _homeIndex == _tabController.index
                ? AppColor.primary
                : AppColor.normal,
            size: Dimensions.tabBarIconSize,
          ),
          title: Text(
            IdString.tabBarBottomHome,
            style: _homeIndex == _currentIndex
                ? AppStyles.bottomTextCurrentStyle
                : AppStyles.bottomTextNormalStyle,
          ),
        ),
      ),

      // 书架
      Tab(
        child: _MyBottomTab(
          icon: Icon(
            IconData(IconCode.shelf, fontFamily: FontFamiles.iconFontFamily),
            color: _shelfIndex == _tabController.index
                ? AppColor.primary
                : AppColor.normal,
            size: Dimensions.tabBarIconSize,
          ),
          title: Text(
            IdString.tabBarBottomShelf,
            style: _shelfIndex == _currentIndex
                ? AppStyles.bottomTextCurrentStyle
                : AppStyles.bottomTextNormalStyle,
          ),
        ),
      ),
      // 心得
      Tab(
        child: _MyBottomTab(
          icon: Icon(
            IconData(IconCode.experience,
                fontFamily: FontFamiles.iconFontFamily),
            color: _experienceIndex == _tabController.index
                ? AppColor.primary
                : AppColor.normal,
            size: Dimensions.tabBarIconSize,
          ),
          title: Text(
            IdString.tabBarBottomExpr,
            style: _experienceIndex == _currentIndex
                ? AppStyles.bottomTextCurrentStyle
                : AppStyles.bottomTextNormalStyle,
          ),
        ),
      ),

      // 我
      Tab(
        child: _MyBottomTab(
          icon: Icon(
            IconData(IconCode.my, fontFamily: FontFamiles.iconFontFamily),
            color: _myIndex == _tabController.index
                ? AppColor.primary
                : AppColor.normal,
            size: Dimensions.tabBarIconSize,
          ),
          title: Text(
            IdString.tabBarBottomMoi,
            style: _myIndex == _currentIndex
                ? AppStyles.bottomTextCurrentStyle
                : AppStyles.bottomTextNormalStyle,
          ),
        ),
      ),
    ];
  }
}

//自定义的底部导航 tab item
// 上部图标,
// 下部文字说明
class _MyBottomTab extends StatelessWidget {
  _MyBottomTab({@required this.icon, @required this.title})
      : assert(icon != null && title != null);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          icon,
          // 使用一空的盒子把 图标和说明文字分割开
          SizedBox(
            height: Dimensions.dimension4,
          ),
          title,
        ],
      ),
    );
  }
  // 图标
  final Icon icon;
  // 底部说明文字背景
  final Text title;
}
